<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compoatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>

    <header class="header">
        <a href="#" class="logo">Logo</a>

        <nav class="navbar">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </nav>
    </header>

    <div class="container">
      
        <script src="./showSlides.js"></script>
        <div class="corcle-darktransp"></div>

        <span class="line"> </span>

        <span class="rotate-btn">
            <i class='bx bx-rotate-right'></i>
        </span>

    </div>
    <script src="script.js"></script>
</body>

</html>

 

<!-- <div class="bg-slide  active">
    <div class="circle bg">
        <img src="img1.jpg">
    </div>

    <div class="circle large">
        <img src="img1.jpg">
    </div>

    <div class="circle small">
        <img src="img1.jpg">
    </div>

    <div class="content-text">

        <div class="place">
            <h1>这是山边城堡</h1>
        </div>
        <div class="country">
            <h2>有很多树</h2>
        </div>
    </div>
</div>

<div class="bg-slide">
    <div class="circle bg">
        <img src="img2.png">
    </div>

    <div class="circle large">
        <img src="img2.png">
    </div>

    <div class="circle small">
        <img src="img2.png">
    </div>

    <div class="content-text">

        <div class="place">
            <h1>这是草原和天空</h1>
        </div>
        <div class="country">
            <h2>还有一棵树</h2>
        </div>
    </div>
</div>

<div class="bg-slide">
    <div class="circle bg">
        <img src="img3.jpg">
    </div>

    <div class="circle large">
        <img src="img3.jpg">
    </div>

    <div class="circle small">
        <img src="img3.jpg">
    </div>

    <div class="content-text">

        <div class="place">
            <h1>这是夜中城市</h1>
        </div>
        <div class="country">
            <h2>树林围绕</h2>
        </div>
    </div>
</div>

<div class="bg-slide">
    <div class="circle bg">
        <img src="img4.png">
    </div>

    <div class="circle large">
        <img src="img4.png">
    </div>

    <div class="circle small">
        <img src="img4.png">
    </div>

    <div class="content-text">

        <div class="place">
            <h1>这是月下城堡</h1>
        </div>
        <div class="country">
            <h2>有很多阴森的树</h2>
        </div>
    </div>
</div>

<div class="bg-slide">
    <div class="circle bg">
        <img src="img5.png">
    </div>

    <div class="circle large">
        <img src="img5.png">
    </div>

    <div class="circle small">
        <img src="img5.png">
    </div>

    <div class="content-text">

        <div class="place">
            <h1>这是太空站</h1>
        </div>
        <div class="country">
            <h2>无法看到地面的树了</h2>
        </div>
    </div>
</div>

<div class="bg-slide">
    <div class="circle bg">
        <img src="img6.png">
    </div>

    <div class="circle large">
        <img src="img6.png">
    </div>

    <div class="circle small">
        <img src="img6.png">
    </div>

    <div class="content-text">

        <div class="place">
            <h1>这是水上房子</h1>
        </div>
        <div class="country">
            <h2>只有一棵树</h2>
        </div>
    </div>
</div> -->